<template>
  <footer class="footer">
    <ul>
       <router-link v-for="item in navt" :key="item.url" :class="{'on':item.id==active}" tag="li" :to="item.url"><em :class="item.src"></em><p>{{item.title}}</p></router-link>
    </ul>
  </footer>
</template>

<script>
export default {
  name: 'footer',
  data () {
    return {
      navt:[
        {id:1,title:'首页',src:'nav01',url:'/home'},
        {id:2,title:'购物车',src:'nav02',url:'/cart'},
        {id:3,title:'我的订单',src:'nav03',url:'/order'},
        {id:4,title:'会员中心',src:'nav04',url:'/about'}
      ]
    }
  },
  computed:{
    active(){
      let name=this.$route.path.substring(1) ;
      let vArr=[
        {title:'',num:1},
        {title:'home',num:1},
        {title:'show',num:1},
        {title:'cart',num:2},
        {title:'cartAdd',num:2},
        {title:'order',num:3},
        {title:'orderDes',num:3},
        {title:'about',num:4},
        {title:'address',num:4},
        {title:'addressAdd',num:4},
        {title:'addressEt',num:4},
        {title:'admin',num:4},
        {title:'card',num:4},
        {title:'integral',num:4},
        {title:'integralList',num:4}
      ]
      for(let i=0;i<vArr.length;i++){
        if(vArr[i].title==name){
          return vArr[i].num
        }
      }
       
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}

.footer{position: fixed;bottom: 0;left: 0;width: 100%;height: h(106);background: #fff;z-index: 5}
.footer ul{display: flex;justify-content: flex-start;border-top: #ddd solid 1px;}
.footer ul li{width: 25%;list-style: none;text-align: center;font-size: h(26);color: #8f8f8f;}
.footer ul li em{width: h(70);height: h(70);display: block;margin: auto;}
.footer ul li p{line-height: 1}
.footer ul li .nav01{background: url('/static/images/nav01.png');background-size: 100%;}
.footer ul li .nav02{background: url('/static/images/nav02.png');background-size: 100%;}
.footer ul li .nav03{background: url('/static/images/nav03.png');background-size: 100%;}
.footer ul li .nav04{background: url('/static/images/nav04.png');background-size: 100%;}
.footer ul li.on p{color: #38b6f0}
.footer ul li.on .nav01{background: url('/static/images/active01.png');background-size: 100%;}
.footer ul li.on .nav02{background: url('/static/images/active03.png');background-size: 100%;}
.footer ul li.on .nav03{background: url('/static/images/active02.png');background-size: 100%;}
.footer ul li.on .nav04{background: url('/static/images/active04.png');background-size: 100%;}




</style>
